<template>
    <div v-if="todayHot" class="three">
        <div class="typeThree" v-if="typeThree">
            <div class="title">
                <h2>{{ todayHot.name }}</h2>
                <router-link tag="p" :to="`/lookAll/${this.typeThreeID}/${todayHot.name}`">
                    查看全部<span class="iconfont icon-dayu"></span>
                </router-link>
            </div>
            <home-list :typeThree="mytypeThree || typeThree"></home-list>
            <div class="more" @click.stop="change">换一批</div>
            <div class="loading" v-if="loading">
                <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                    >加载中...</van-loading
                >
            </div>
        </div>
    </div>
</template>

<script>
import HomeList from "./homeList.vue";
export default {
    components: {
        HomeList,
    },
    props: {
        todayHot: {
            type: Object,
            default: () => {
                return null;
            },
        },
        typeThreeID: {
            type: Number,
            default: 0,
        },
        typeThree: {
            type: Array,
            default: () => {
                return null;
            },
        },
    },
    data() {
        return {
            pageNum: "0",
            loading: false,
            mytypeThree: [],
            mytypeThreeID: null,
        };
    },
    created() {
        this.mytypeThree = this.typeThree;
        this.mytypeThreeID = this.typeThreeID;
    },
    methods: {
        //换一换
        change() {
            let pageNum = Math.floor(Math.random() * 15 + 1);
            this.pageNum = pageNum;
            if (this.pageNum == pageNum) {
                pageNum = Math.floor(Math.random() * 15 + 1);
            }
            this.mytypeThree = [];
            this.loading = true;
            this.axios
                .get(
                    `GetClassPageSixComics?id=${this.typeThreeID}&pageNum=${pageNum}&pageSize=6&isAll=0`
                )
                .then((res) => {
                    this.mytypeThree = res.roll_six_comics;
                    this.loading = false;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.three {
    position: relative;
    .typeThree {
        margin: 20px 15px;
        height: 75vh;
        position: relative;
        .title {
            display: flex;
            justify-content: space-between;
            align-content: center;
            h2 {
                font-weight: bold;
                font-size: 16px;
                color: #1b1c1e;
            }
            p {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.5);
            }
        }
        .loading {
            position: absolute;
            left: 0;
            right: 0;
            top: 35vh;
        }
        .more {
            position: absolute;
            text-align: center;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 10px 0;
            border-radius: 30px;
            width: 70%;
            font-weight: bold;
            opacity: 0.5;
            background-color: #f0f0f0;
        }
    }
}
</style>
